<template>
  <view class="order-container">
    <!-- 主内容区域 -->
    <view class="order-content">
      <!-- 地址卡片 -->
      <navigator
        hover-class="none"
        url="/bundle/pages/user_address/user_address?type=1"
        v-if="
          (teamId == undefined &&
          shopLists.length != 0 &&
          !deliveryType &&
          shopLists[0].goods[0].type == 0) || 
          (teamId !== undefined &&
          shopLists.length != 0 &&
          shopLists.delivery_type == 1)
        "
      >
        <view class="address-module">
          <view class="address-card">
            <view class="module-header">
              <text class="module-title">收货地址</text>
              <view class="location-tag" v-if="address.contact">
                <u-icon name="map-fill" size="24" color="#3A86FF"></u-icon>
                <text>当前位置</text>
              </view>
            </view>
            
            <view class="empty-address" v-if="!address.contact">
              <u-icon name="plus-circle" size="48" color="#CCCCCC"></u-icon>
              <text>添加收货地址</text>
            </view>
            
            <view class="address-info" v-else>
              <view class="user-info">
                <view class="avatar" v-if="address.contact">{{ address.contact.substring(0, 1) }}</view>
                <view class="details">
                  <view class="name-phone">
                    <text class="name">{{ address.contact }}</text>
                    <text class="phone">{{ address.telephone }}</text>
                  </view>
                  <view class="address-text">
                    {{ address.province }} {{ address.city }}
                    {{ address.district }} {{ address.address }}
                  </view>
                </view>
              </view>
            </view>
            
            <view class="address-action">
              <u-icon name="arrow-right" color="#BBBBBB" size="28"></u-icon>
            </view>
          </view>
          
          <!-- 波浪分隔线 -->
          <view class="wave-divider">
            <view class="wave"></view>
          </view>
        </view>
      </navigator>
      
      <!-- 商品卡片区域 -->
      <view class="goods-section">
        <!-- 普通商品列表 -->
        <block v-if="teamId == undefined">
          <view 
            class="shop-card"
            v-for="(item, index) in shopLists"
            :key="index"
          >
            <view class="shop-header">
              <view class="shop-info">
                <u-icon name="shopping-cart" size="32" color="#FF2C3C"></u-icon>
                <text class="shop-name">{{ item.shop_name }}</text>
              </view>
              <view class="shop-type">
                <view class="delivery-badge" :class="item.delivery_type === 1 ? 'express' : 'self'">
                  {{ item.delivery_type === 1 ? '快递配送' : '到店自提' }}
                </view>
              </view>
            </view>
            
            <order-shop
              :order-type="orderInfo.order_type"
              :item="item"
              :invoice="invoiceArr"
              @changeremark="changeRemark"
              @changecoupon="changeCoupon($event, index)"
              @changeDeliveryType="changeDeliveryType($event, item)"
              :teamId="teamId"
              :bargainLaunchId="bargainLaunchId"
            ></order-shop>
            
            <view class="shop-footer">
              <view class="remark-section">
                <text class="remark-label">订单备注：</text>
                <input 
                  class="remark-input" 
                  placeholder="选填，请先和商家协商一致" 
                  @input="onRemarkInput($event, item.shop_id)"
                  :value="getRemarkByShopId(item.shop_id)"
                />
              </view>
            </view>
          </view>
        </block>
        
        <!-- 拼团商品卡片 -->
        <block v-if="teamId !== undefined && teamLists.delivery_types_arr.length">
          <view class="shop-card team-shop">
            <view class="shop-header">
              <view class="shop-info">
                <u-icon name="shopping-cart" size="32" color="#FF2C3C"></u-icon>
                <text class="shop-name">{{ shopLists.shop_name }}</text>
              </view>
              <view class="team-badge">
                <u-icon name="people" size="24" color="#FFFFFF"></u-icon>
                <text>拼团商品</text>
              </view>
            </view>
            
            <order-shop
              :order-type="orderInfo.order_type"
              :item="shopLists"
              :invoice="invoiceArr"
              @changeremark="changeRemark"
              @changeDeliveryType="changeDeliveryType($event, shopLists)"
              :teamId="teamId"
              :bargainLaunchId="bargainLaunchId"
            ></order-shop>
          </view>
        </block>
      </view>
      
      <!-- 订单金额区域 -->
      
      <!-- 预计到达时间 -->
      <view class="delivery-section" v-if="hasPhysicalGoods">
        <view class="module-card delivery-card">
          <view class="delivery-info">
            <view class="delivery-icon">
              <u-icon name="car-fill" color="#FF9500" size="36"></u-icon>
            </view>
            <view class="delivery-content">
              <view class="delivery-title">预计送达时间</view>
              <view class="delivery-desc">{{ estimatedDelivery }} (实际以物流配送为准)</view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 安全区域占位 -->
      <view class="safe-area-bottom"></view>
    </view>

    <!-- 底部提交栏 -->
    <view class="order-footer">
      <view class="footer-content">
        <view class="price-section">
          <text class="price-label">合计：</text>
          <price-format
            weight="600"
            :first-size="36"
            :second-size="28"
            :price="orderInfo.total_amount"
            text-color="#FF2C3C"
          ></price-format>
        </view>
        
        <button 
          class="submit-button" 
          :class="{ 'disabled': submitting }"
          :disabled="submitting"
          @tap="onSubmitOrder"
        >
          <view class="loading-icon" v-if="submitting">
            <view class="loading-dot"></view>
            <view class="loading-dot"></view>
            <view class="loading-dot"></view>
          </view>
          <text v-else>提交订单</text>
        </button>
      </view>
    </view>

    <loading-view
      v-if="showLoading"
      background-color="transparent"
      :size="50"
    ></loading-view>
    <loading-view v-if="isFirstLoading"></loading-view>
  </view>
</template>

<script>
import { orderInfo, orderBuy, getOrderCoupon } from "@/api/order";
import { teamBuy, teamKaiTuan } from "@/api/activity";
import { prepay, getMnpNotice, getPayway } from "@/api/app";
import { wxpay, alipay } from "@/utils/pay";

export default {
  data() {
    return {
      isFirstLoading: true,
      showLoading: false,
      submitting: false,
      address: {
        contact: "",
        telephone: "",
        province: "",
        district: "",
        address: "",
        city: "",
      },
      orderInfo: {},
      shopLists: [],
      teamLists: {
        delivery_types_arr: [],
      },
      addressId: "",
      useIntegral: 0,
      userRemark: [],
      couponId: [],
      teamId: undefined,
      carts: [],
      type: "",
      goodsType: 1, // 0-实物商品 1-虚拟商品
      goods: "",
      bargainLaunchId: -1,
      invoiceArr: [], // 发票数组
      estimatedDelivery: '', // 预计送达时间
      tempOptions: null, //判断是否是云购活动进来的商品
    };
  },

  computed: {
    deliveryType() {
      if (this.teamId) {
        return;
      }
      return this.shopLists.every((i) => {
        return i.delivery_type == 2;
      });
    },
    
    hasPhysicalGoods() {
      if (this.teamId !== undefined) {
        return this.shopLists.delivery_type === 1;
      }
      
      return this.shopLists.some(shop => {
        return shop.delivery_type === 1 && shop.goods.some(good => good.type === 0);
      });
    }
  },

  onLoad(options) {
    console.log('options:', options);
    console.log(JSON.stringify(options));
    //判断是否是云购活动进来的商品
    // this.tempOptions = options;
    // 计算预计送达时间
    this.estimatedDelivery = this.getEstimatedDelivery();
    
    uni.$on("selectaddress", (e) => {
      this.addressId = e.id;
      this.orderBuyFun();
    });

    // 监听发票传回的值
    uni.$on("invoice", (params) => {
      const index = this.invoiceArr.findIndex(
        (el) => el.shop_id == params.shop_id
      );
      if (params.del == true && this.invoiceArr.length) {
        this.invoiceArr.splice(index, 1);
      } else {
        if (index == -1) this.invoiceArr = [...this.invoiceArr, params];
        else this.invoiceArr.splice(index, 1, params);
      }
    });

    const {
      data: { goods, carts, teamId, foundId, type, goodsType },
    } = this.$Route.query;
    this.goods = goods;
    this.bargainLaunchId = goods[0].bargain_launch_id || -1;
    this.carts = carts || [];
    this.type = type;
    this.goodsType = goodsType;
    this.teamId = teamId;
    // 参团的id，如果为空的话就是开团，如果有数据就是参团
    this.foundId = foundId || "";

    this.orderBuyFun();
  },

  onUnload() {
    uni.$off("selectaddress");
    uni.$off("payment");
    uni.$off("invoice");
  },

  methods: {
    // 获取商品总数量
    getTotalItems() {
      let count = 0;
      if (this.teamId == undefined) {
        this.shopLists.forEach(shop => {
          shop.goods.forEach(good => {
            count += parseInt(good.num);
          });
        });
      } else {
        // 拼团商品
        count = this.shopLists.goods ? this.shopLists.goods.reduce((total, good) => {
          return total + parseInt(good.num);
        }, 0) : this.goods[0].num;
      }
      return count;
    },
    
    // 计算预计送达时间
    getEstimatedDelivery() {
      const date = new Date();
      date.setDate(date.getDate() + 3);
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${month}月${day}日`;
    },
    
    // 根据店铺ID获取备注
    getRemarkByShopId(shopId) {
      const remarkItem = this.userRemark.find(item => item.shop_id === shopId);
      return remarkItem ? remarkItem.remark : '';
    },
    
    // 处理备注输入
    onRemarkInput(e, shopId) {
      const remark = e.detail.value;
      this.changeRemark({
        shop_id: shopId,
        remark: remark
      });
    },
    
    // 备注
    changeRemark(e) {
      let index = this.userRemark.findIndex(
        (item) => item.shop_id == e.shop_id
      );
      if (index == -1) {
        this.userRemark.push(e);
      } else {
        this.userRemark[index].remark = e.remark;
      }
      this.userRemark = this.userRemark.filter((item) => item.remark);
    },

    // 选中优惠券
    changeCoupon(e, index) {
      this.couponId[index] = e;
      this.orderBuyFun();
    },

    // 选择对应的配送方式赋值给商品中的配送方式
    changeDeliveryType(type, row) {
      row.delivery_type = type;
      for (let i = 0; i < this.goods.length; i++) {
        const item = this.goods[i];
        if (row.shop_id == item.shop_id) {
          this.goods[i].delivery_type = type;
        }
      }
      this.orderBuyFun();
    },

    getAuthMsg() {
      return new Promise((resolve) => {
        getMnpNotice({
          scene: 1,
        }).then((res) => {
          if (res.code == 1) {
            uni.requestSubscribeMessage({
              tmplIds: res.data,
              fail(res) {
                console.log(res.errMsg);
              },
              complete() {
                resolve();
              },
            });
          } else {
            resolve();
          }
        });
      });
    },

    async onSubmitOrder() {
      if (this.submitting) return;
      
      this.submitting = true;
      
      // 显示确认对话框
      const result = await new Promise(resolve => {
        uni.showModal({
          title: "确认订单",
          content: "确认提交订单并进行支付?",
          confirmColor: "#FF2C3C",
          success: res => resolve(res.confirm)
        });
      });
      
      if (result) {
        // #ifdef MP-WEIXIN
        await this.getAuthMsg();
        // #endif
        
        this.showLoading = true;
        this.orderBuyFun("submit");
      } else {
        this.submitting = false;
      }
    },

    async orderBuyFun(action = "info") {
      try {
        const {
          userRemark,
          useIntegral,
          carts,
          goods,
          bargainLaunchId,
          couponId,
          shopLists,
        } = this;
        const submitObj = {
          goods: JSON.stringify(goods),
          address_id: this.addressId || 0,
          cart_id: carts.join(),
          coupon_id: couponId.filter((item) => item),
          // bargain_launch_id是砍价的判断
          bargain_launch_id:
            this.bargainLaunchId == -1 ? "" : this.bargainLaunchId,
          goods_type: this.goodsType,
        };

        
        // 判断是不是拼团的，并且是获取订单数据
        if (this.teamId && action == "info") {
          delete submitObj.goods;
          submitObj.action = "info";
          submitObj.item_id = this.goods[0].item_id;
          submitObj.delivery_type = this.goods[0].delivery_type;
          submitObj.count = this.goods[0].num;
          submitObj.goods_id = this.goods[0].goods_id;
          submitObj.team_id = this.teamId;
        }
        // 判断是不是拼团的，并且是提交订单
        if (this.teamId && action == "submit") {
          submitObj.action = "buy";
          submitObj.item_id = this.goods[0].item_id;
          submitObj.delivery_type = this.goods[0].delivery_type;
          submitObj.count = this.goods[0].num;
          submitObj.goods_id = this.goods[0].goods_id;
          submitObj.team_id = this.foundId;
        }

        // console.log(JSON.stringify(goods));



        if (!this.teamId && action == "submit") {
          if (this.shopLists && this.shopLists.length > 0) {
            submitObj.delivery_type = this.shopLists[0].delivery_type || 0;
            
            if (this.goods && Array.isArray(this.goods)) {
              this.shopLists.forEach((item) => {
                this.goods.forEach((i) => {
                  if (i.shop_id == item.shop_id) {
                    i.delivery_type = item.delivery_type;
                  }
                });
              });
            }
            
            submitObj.goods = JSON.stringify(this.goods);
            submitObj.remark = userRemark.length ? JSON.stringify(userRemark) : "";
            submitObj.invoice = JSON.stringify(this.invoiceArr);
            
            //判断是否是云购活动进来的商品
            console.log('submitObj.goods');
            console.log(this.goods);
            console.log(typeof this.goods);
            console.log(this.goods[0]);
            console.log(this.goods[0].hasOwnProperty('second_buy_id'));
            if (this.goods[0].hasOwnProperty('second_buy_id')) {
              submitObj.second_buy_id = this.goods[0].second_buy_id;
              submitObj.is_second_buy = this.goods[0].is_second_buy;
            }
          }
        }

        let { data: orderData, code: orderCode, msg: orderMsg } = 
          action == "info"
            ? this.teamId
              ? await teamKaiTuan(submitObj)
              : await orderInfo(submitObj)
            : this.teamId
              ? await teamKaiTuan(submitObj)
              : await orderBuy(submitObj);

        if (orderMsg == "抱歉,库存不足") {
          setTimeout(() => {
            uni.navigateBack(1);
          }, 500);
        }

        if (orderCode !== 1) {
          this.showLoading = false;
          this.submitting = false;
          return;
        }

        if (action == "info") {
          const { shop, address } = orderData;
          this.address = address;
          this.shopLists = shop;
          this.teamLists = shop;
          this.orderInfo = orderData;
          
          this.$nextTick(() => {
            this.isFirstLoading = false;
          });
        } else if (action == "submit") {
          this.showLoading = false;
          this.submitting = false;
          
          const { shop } = orderData;
          this.shopLists = shop;

          let order_id = "";
          const type = orderData.type;

          switch (type) {
            case "order":
              order_id = orderData.order_id;
              break;
            case "trade":
              order_id = orderData.trade_id;
              break;
          }

          uni.$on("payment", (params) => {
            setTimeout(() => {
              if (params.result) {
                this.$Router.replace({
                  path: "/pages/pay_result/pay_result",
                  query: {
                    id: params.order_id,
                    from: params.from,
                  },
                });
              } else {
                this.$Router.replace({
                  path: "/bundle/pages/user_order/user_order",
                });
              }
            }, 1000);
          });

          
          //判断是否是云购活动进来的商品
          console.log(this.$Route.query);
          console.log(this.goods);
          if (this.goods[0].hasOwnProperty('second_buy_id')) {
            console.log('路径进入支付确认页面');
            uni.navigateTo({
              url: `/pages/payment/payment?from=${type}&order_id=${order_id}&second_buy_id=${this.goods[0].second_buy_id}&is_second_buy=${this.goods[0].is_second_buy}`,
            });
          } else {
            uni.navigateTo({
              url: `/pages/payment/payment?from=${type}&order_id=${order_id}`,
            });
          }

          
        }
      } catch (error) {
        console.error("订单处理错误:", error);
        this.showLoading = false;
        this.submitting = false;
        
        uni.showToast({
          title: "订单处理失败，请重试",
          icon: "none"
        });
      }
    },
  },
  
  watch: {
    address(val) {
      this.addressId = val.id;
    },
  },
};
</script>

<style lang="scss" scoped>
.order-container {
  --primary-color: #FF2C3C;
  --gradient-primary: linear-gradient(135deg, #FF9500, #FF2C3C);
  --gradient-button: linear-gradient(135deg, #F95F2F, #FF2C3C);
  --text-primary: #333333;
  --text-secondary: #666666;
  --text-tertiary: #999999;
  --bg-color: #F7F8FC;
  --card-bg: #FFFFFF;
  --border-color: #EEEEEE;
  
  min-height: 100vh;
  background-color: var(--bg-color);
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
  
  /* 进度指示器 */
  .order-progress {
    padding: 40rpx 30rpx 30rpx;
    position: relative;
    background: var(--card-bg);
    
    .progress-line {
      position: absolute;
      top: 40rpx;
      left: 80rpx;
      right: 80rpx;
      height: 4rpx;
      background-color: #EEEEEE;
      
      .progress-active {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 33.3%;
        background: var(--gradient-primary);
      }
    }
    
    .progress-steps {
      display: flex;
      justify-content: space-between;
      position: relative;
      z-index: 2;
      
      .step {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .step-dot {
          width: 20rpx;
          height: 20rpx;
          border-radius: 50%;
          background-color: #EEEEEE;
          margin-bottom: 12rpx;
        }
        
        text {
          font-size: 24rpx;
          color: var(--text-tertiary);
        }
        
        &.completed {
          .step-dot {
            background: var(--primary-color);
          }
          
          text {
            color: var(--primary-color);
          }
        }
        
        &.active {
          .step-dot {
            width: 24rpx;
            height: 24rpx;
            background: var(--gradient-primary);
            box-shadow: 0 2rpx 8rpx rgba(255, 44, 60, 0.3);
          }
          
          text {
            color: var(--primary-color);
            font-weight: 600;
          }
        }
      }
    }
  }
  
  /* 内容区域 */
  .order-content {
    padding: 24rpx 30rpx;
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;
      
      .section-title {
        font-size: 30rpx;
        font-weight: 600;
        color: var(--text-primary);
      }
      
      .goods-count {
        font-size: 26rpx;
        color: var(--text-tertiary);
      }
    }
    
    /* 卡片模块基础样式 */
    .module-card {
      background: var(--card-bg);
      border-radius: 16rpx;
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
      margin-bottom: 24rpx;
      overflow: hidden;
      
      .module-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24rpx 30rpx;
        border-bottom: 1rpx solid #F5F5F5;
        
        .module-title {
          font-size: 30rpx;
          font-weight: 600;
          color: var(--text-primary);
        }
      }
    }
    
    /* 地址卡片 */
    .address-module {
      position: relative;
      margin-bottom: 40rpx;
      
      .address-card {
        background: var(--card-bg);
        border-radius: 16rpx 16rpx 24rpx 24rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
        padding: 24rpx 30rpx;
        position: relative;
        
        .location-tag {
          display: flex;
          align-items: center;
          background: rgba(58, 134, 255, 0.1);
          border-radius: 16rpx;
          padding: 4rpx 12rpx;
          
          text {
            font-size: 24rpx;
            color: #3A86FF;
            margin-left: 4rpx;
          }
        }
        
        .empty-address {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 30rpx 0;
          
          text {
            font-size: 30rpx;
            color: var(--text-tertiary);
            margin-top: 16rpx;
          }
        }
        
        .address-info {
          padding: 10rpx 0;
          
          .user-info {
            display: flex;
            align-items: center;
            
            .avatar {
              width: 80rpx;
              height: 80rpx;
              background: var(--gradient-primary);
              border-radius: 40rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #FFFFFF;
              font-size: 36rpx;
              font-weight: 600;
              margin-right: 20rpx;
              flex-shrink: 0;
            }
            
            .details {
              flex: 1;
              
              .name-phone {
                display: flex;
                align-items: center;
                margin-bottom: 12rpx;
                
                .name {
                  font-size: 32rpx;
                  color: var(--text-primary);
                  font-weight: 600;
                  margin-right: 16rpx;
                }
                
                .phone {
                  font-size: 28rpx;
                  color: var(--text-secondary);
                }
              }
              
              .address-text {
                font-size: 28rpx;
                color: var(--text-secondary);
                line-height: 1.5;
              }
            }
          }
        }
        
        .address-action {
          position: absolute;
          right: 30rpx;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      
      .wave-divider {
        position: absolute;
        bottom: -16rpx;
        left: 0;
        width: 100%;
        height: 24rpx;
        overflow: hidden;
        
        .wave {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 24rpx;
          background-image: url("data:image/svg+xml,%3Csvg width='400' height='24' viewBox='0 0 400 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 24H400V0C400 0 350 24 300 24C250 24 250 0 200 0C150 0 150 24 100 24C50 24 50 0 0 0V24Z' fill='white'/%3E%3C/svg%3E");
          background-repeat: repeat-x;
          background-size: 400rpx 24rpx;
          animation: wave 20s linear infinite;
        }
      }
    }
    
    /* 商品区域 */
    .goods-section {
      margin-bottom: 24rpx;
      
      .shop-card {
        background: var(--card-bg);
        border-radius: 16rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
        margin-bottom: 24rpx;
        overflow: hidden;
        
        .shop-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 24rpx 30rpx;
          border-bottom: 2rpx solid #F5F5F5;
          
          .shop-info {
            display: flex;
            align-items: center;
            
            .shop-name {
              font-size: 28rpx;
              color: var(--text-primary);
              font-weight: 600;
              margin-left: 12rpx;
            }
          }
          
          .shop-type {
            .delivery-badge {
              font-size: 24rpx;
              padding: 4rpx 12rpx;
              border-radius: 16rpx;
              
              &.express {
                background: rgba(255, 44, 60, 0.1);
                color: #FF2C3C;
              }
              
              &.self {
                background: rgba(38, 198, 118, 0.1);
                color: #26C676;
              }
            }
          }
          
          .team-badge {
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, #FF9500, #FF2C3C);
            border-radius: 16rpx;
            padding: 4rpx 12rpx;
            
            text {
              font-size: 24rpx;
              color: #FFFFFF;
              margin-left: 4rpx;
            }
          }
        }
        
        .shop-footer {
          padding: 24rpx 30rpx;
          border-top: 2rpx solid #F5F5F5;
          
          .remark-section {
            display: flex;
            align-items: center;
            
            .remark-label {
              font-size: 28rpx;
              color: var(--text-secondary);
              flex-shrink: 0;
            }
            
            .remark-input {
              flex: 1;
              height: 60rpx;
              font-size: 28rpx;
              color: var(--text-primary);
            }
          }
        }
      }
    }
    
    /* 物流信息 */
    .delivery-section {
      margin-bottom: 24rpx;
      
      .delivery-card {
        .delivery-info {
          display: flex;
          align-items: center;
          padding: 24rpx 30rpx;
          
          .delivery-icon {
            width: 80rpx;
            height: 80rpx;
            border-radius: 40rpx;
            background: rgba(255, 149, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20rpx;
          }
          
          .delivery-content {
            flex: 1;
            
            .delivery-title {
              font-size: 28rpx;
              color: var(--text-primary);
              font-weight: 600;
              margin-bottom: 8rpx;
            }
            
            .delivery-desc {
              font-size: 26rpx;
              color: var(--text-secondary);
            }
          }
        }
      }
    }
    
    .safe-area-bottom {
      height: 120rpx;
    }
  }
  
  /* 底部提交栏 */
  .order-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(20rpx);
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom);
    
    .footer-content {
      height: 120rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30rpx;
      
      .price-section {
        display: flex;
        align-items: baseline;
        
        .price-label {
          font-size: 28rpx;
          color: #333333;
          margin-right: 8rpx;
        }
      }
      
      .submit-button {
        height: 88rpx;
        border-radius: 44rpx;
        background: var(--gradient-button);
        padding: 0 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        box-shadow: 0 8rpx 16rpx rgba(255, 44, 60, 0.25);
        transition: all 0.3s;
        
        text {
          font-size: 32rpx;
          color: #FFFFFF;
          font-weight: 600;
          letter-spacing: 2rpx;
        }
        
        .loading-icon {
          display: flex;
          align-items: center;
          
          .loading-dot {
            width: 12rpx;
            height: 12rpx;
            border-radius: 50%;
            background: #FFFFFF;
            margin: 0 6rpx;
            opacity: 0.6;
            animation: loading 1.4s infinite ease-in-out both;
            
            &:nth-child(1) {
              animation-delay: -0.32s;
            }
            
            &:nth-child(2) {
              animation-delay: -0.16s;
            }
          }
        }
        
        &:active:not(.disabled) {
          transform: scale(0.98);
          box-shadow: 0 4rpx 8rpx rgba(255, 44, 60, 0.2);
        }
        
        &.disabled {
          opacity: 0.7;
          background: linear-gradient(135deg, #CCCCCC, #999999);
          box-shadow: none;
        }
        
        /* 闪光效果 */
        &::after {
          content: '';
          position: absolute;
          top: -50%;
          left: -50%;
          width: 200%;
          height: 200%;
          background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.1)
			            rgba(255, 255, 255, 0) 0%,
			            rgba(255, 255, 255, 0.1) 50%,
			            rgba(255, 255, 255, 0) 100%
			          );
			          transform: rotate(30deg);
			          animation: shineEffect 3s infinite;
			        }
			      }
			    }
			  }
			  
			  /* 动画定义 */
			  @keyframes shineEffect {
			    0% {
			      left: -100%;
			    }
			    20%, 100% {
			      left: 100%;
			    }
			  }
			  
			  @keyframes loading {
			    0%, 80%, 100% {
			      transform: scale(0);
			    }
			    40% {
			      transform: scale(1);
			    }
			  }
			  
			  @keyframes float {
			    0% {
			      transform: translateY(0);
			    }
			    50% {
			      transform: translateY(-6rpx);
			    }
			    100% {
			      transform: translateY(0);
			    }
			  }
			  
			  @keyframes pulse {
			    0% {
			      transform: scale(1);
			    }
			    50% {
			      transform: scale(1.05);
			    }
			    100% {
			      transform: scale(1);
			    }
			  }
			  
			  /* 波浪分隔线动画 */
			  @keyframes wave {
			    0% {
			      background-position: 0 0;
			    }
			    100% {
			      background-position: 100vw 0;
			    }
			  }
			}
			</style>
			